<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 22:41:16
-->
<template>
  <div  ref="bottom2_container" style="height:95%"></div>
</template>
<script>
import { Line } from '@antv/g2plot';
export default {
  data(){
    return{
      dataArr:[ { year: '1991', value: 3 },
  { year: '1992', value: 6 },
  { year: '1993', value: 6 },
  { year: '1994', value: 6 },
  { year: '1995', value: 6 },
  { year: '1996', value: 6 },
  { year: '1997', value: 6 },
  { year: '1998', value: 6 },
  { year: '1999', value: 6 },]
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){const line = new Line(this.$refs.bottom2_container, {
  data:this.dataArr,
  xField: 'year',
  yField: 'value',
  label: {},
  point: {
    size: 5,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#5B8FF9',
      lineWidth: 2,
    },
  },
  tooltip: { showMarkers: false },
  state: {
    active: {
      style: {
        shadowBlur: 4,
        stroke: '#000',
        fill: 'red',
      },
    },
  },
  interactions: [{ type: 'marker-active' }],
});

line.render();
    }
  }
}
</script>